Cuando cargo mi página, todo está bien. Cuando se agrega un nuevo programa, aparece el error. ¡Cada tiene una clave, busqué en todas las preguntas y blogs pero no puedo hacerlo bien!
ShowsDisplay.js
import styles from "./ShowsDisplay.module.css"; function ShowsDisplay ({shows, deleteShow}) { if (shows.length === 0) { return ( <div key={"nenhumshow"}> <p>Nenhum show listado</p> </div> ); } return ( <div key={"showsencontrados"}> {shows.map((show) => { return ( <div key={show.id} className={styles.showsDisplay}> <p className={styles.showsTitles}> {show.title}</p> <button className={styles.deleteButton} type="button" onClick={ () => deleteShow(show) }>Delete</button> </div> ); })} </div> ); } export default ShowsDisplay;Intente hacer que la clave sea lo más única posible para cada elemento secundario. Key es la propiedad que le dice a React DOM, qué elemento secundario se actualiza/elimina/agrega.
{shows.map((show,index) => { return ( <div key={show.id+" "+ index} className={styles.showsDisplay}> <p className={styles.showsTitles}> {show.title}</p> <button className={styles.deleteButton} type="button" onClick={ () => deleteShow(show) }>Delete</button> </div> ); })}Debe ser sobre el nuevo programa, probablemente la identificación del nuevo programa no esté definida, por lo que obtiene ese error
si su identificación no es un número en una fila, intente esto
{shows.map((show,index) => { return ( <div key={show.id??index} className={styles.showsDisplay}> <p className={styles.showsTitles}> {show.title}</p> <button className={styles.deleteButton} type="button" onClick={ () => deleteShow(show) }>Delete</button> </div> ); })}O solo esto''